<template>
  <div id="sudoku-demo" class="demo">
    <h1>抽奖</h1>
    <el-button type="primary" @click="shuffle">乱序</el-button>
    <el-button :disabled="!canStart" type="success" @click="start"
      >开始</el-button
    >
    <el-button :disabled="canStart" type="warning" @click="stop"
      >暂停</el-button
    >
    <el-divider>奖池</el-divider>
    <transition-group name="cell" tag="div" class="container">
      <rollCell
        v-for="(item, index) in list"
        :key="item.id"
        :active="activeIndex === index"
        :index="index"
        @removeItem="removeItem"
      >
        {{ item.name }}
      </rollCell>
    </transition-group>
    <el-divider
      >抽奖结果
      <el-button class="copy-btn" type="success" v-if="results.length > 0"
        >拷贝</el-button
      ></el-divider
    >
    <transition-group name="cell" tag="div" class="container">
      <resCell v-for="item in results" :key="item.id">
        {{ item.name }}
      </resCell>
    </transition-group>
    <!-- 隐藏的用来保存文本框-->
    <div class="hidden-box" ref="hiddenBox" v-html="markdownList"></div>
  </div>
</template>

<script>
import list from './data/data'
import _ from 'lodash'
import rollCell from './components/rollCell.vue'
import resCell from './components/resCell.vue'
import Clipboard from 'clipboard'
export default {
  name: 'app',
  data: function () {
    return {
      list,
      // 高亮类名
      activeIndex: -1,
      // 抽奖结果
      results: [],
      // 定时器id
      timeId: undefined
    }
  },
  mounted () {
    const clipboard = new Clipboard('.copy-btn', {
      target: () => {
        return this.$refs.hiddenBox
      }
    })
    clipboard.on('success', () => {
      this.$message.success('拷贝成功!')
    })
  },
  components: {
    rollCell,
    resCell
  },
  computed: {
    markdownList () {
      return (
        ',' +
        this.results
          .map(v => {
            return `${v.name}`
          })
          .join(',')
      )
    },
    max () {
      return this.list.length - 1
    },
    canStart () {
      return this.timeId === undefined
    }
  },
  methods: {
    // 删除
    removeItem (index) {
      this.list.splice(index, 1)
    },
    // 随机数
    // 乱序
    shuffle: function () {
      clearInterval(this.timeId)
      this.timeId = undefined
      this.activeIndex = -1
      this.list = _.shuffle(this.list)
    },
    // 生成不重复的随机数
    randomNum () {
      let newIndex
      do {
        newIndex = _.random(0, this.max)
      } while (newIndex === this.activeIndex)
      this.activeIndex = newIndex
    },
    // 随机
    start () {
      clearInterval(this.timeId)
      this.timeId = undefined
      this.timeId = setInterval(this.randomNum, 50)
    },
    // 停止
    async stop () {
      clearInterval(this.timeId)
      this.timeId = undefined
      this.results.push(...this.list.splice(this.activeIndex, 1))
      this.activeIndex = -1
    }
  }
}
</script>

<style lang="less">
.container {
  display: flex;
  flex-wrap: wrap;
  width: 900px;
  margin-top: 10px;
  margin: 0 auto;
}
.hidden-box {
  opacity: 0;
}
</style>
